<template>
  <view class="message-item">
    <view class="card">
      <!-- 卡片头部 -->
      <view class="card-header">
        <text class="user-phone">{{ message?.userPhone || '-' }}</text>
        <view class="status-tag" :class="getStatusClass(message?.status)">
          <text>{{ getStatusText(message?.status) }}</text>
        </view>
      </view>
      
      <!-- 卡片内容 -->
      <view class="card-content">
        <view class="info-row">
          <text class="label">留言内容：</text>
          <text class="value content-text">{{ message?.content || '-' }}</text>
        </view>
        <view class="info-row" v-if="message?.replyContent">
          <text class="label">回复内容：</text>
          <text class="value">{{ message?.replyContent }}</text>
        </view>
        <view class="info-row">
          <text class="label">留言时间：</text>
          <text class="value">{{ message?.createTime || '-' }}</text>
        </view>
        <view class="info-row" v-if="message?.replyTime">
          <text class="label">回复时间：</text>
          <text class="value">{{ message?.replyTime }}</text>
        </view>
      </view>
      
      <!-- 卡片底部操作 -->
      <view class="card-footer">
        <view class="action-buttons">
          <up-button type="info" size="small" @click="handleView">查看详情</up-button>
        </view>
        <view class="action-buttons" v-if="message?.status === 'pending'">
          <up-button type="success" size="small" @click="handleReply">回复</up-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义props
const props = defineProps({
  message: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['reply', 'view'])

// 处理回复操作
const handleReply = () => {
  emit('reply', props.message)
}

// 处理查看详情
const handleView = () => {
  emit('view', props.message)
}

// 获取状态样式类
const getStatusClass = (status) => {
  const statusMap = {
    pending: 'status-pending',
    replied: 'status-replied'
  }
  return statusMap[status] || 'status-pending'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待回复',
    replied: '已回复'
  }
  return statusMap[status] || '待回复'
}
</script>

<style lang="scss" scoped>
.message-item {
  margin-bottom: 12px;
  
  .card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .user-phone {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      
      .status-tag {
        padding: 4px 8px;
        border-radius: 4px;
        
        text {
          font-size: 12px;
          color: #fff;
        }
        
        &.status-pending {
          background-color: #ff9500;
        }
        
        &.status-replied {
          background-color: #07c160;
        }
      }
    }
    
    .card-content {
      margin-bottom: 16px;
      
      .info-row {
        display: flex;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 14px;
          color: #666;
          width: 80px;
          flex-shrink: 0;
        }
        
        .value {
          font-size: 14px;
          color: #333;
          flex: 1;
          
          &.content-text {
            word-break: break-all;
          }
        }
      }
    }
    
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .action-buttons {
        display: flex;
        gap: 8px;
      }
    }
  }
}
</style>